<template>
  <div class="header">
    <div @click="leftBtn">{{ leftText }}</div>
    <div>{{ centerText }}</div>
    <div @click="rightBtn">{{ rightText }}</div>
  </div>
</template>

<script>
export default {
  props: {
    leftText: String,
    centerText: String,
    rightText: String,
  },

  setup(P, { emit }) {
    function leftBtn() {
      emit("leftBtn");
    }
    function rightBtn() {
      emit("rightBtn");
    }
    return {
      leftBtn,
      rightBtn,
    };
  },
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 100px;
  background-color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 32px;
  border-bottom: 1px solid #eeeeee;
}
</style>
